<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <meta name="format-detection" content="telephone=yes">
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" href="${ctx}/view/template/portal_1/css/css.css"/>
    <link rel="stylesheet" href="${ctx}/view/template/portal_1/css/banner.css"/>
    <script type="text/javascript" src="${ctx}/view/template/portal_1/js/jquery.js"></script>
    <script src = "http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script >
    
	    var host = window.location.host;
	    /*微信 jssdk*/
	    wx.config({
	       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	       appId: '${appid}', // 必填，公众号的唯一标识
	       timestamp: '${timestamp}', // 必填，生成签名的时间戳
	       nonceStr: '${nonceStr}', // 必填，生成签名的随机串
	       signature: '${signature}',// 必填，签名，见附录1
	       jsApiList: ['getLocation',
	                   'onMenuShareTimeline',
	                   'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	    });
	  //TODO
	    wx.ready(function(){
			wx.onMenuShareTimeline({
			    link: host+'${ctx}/p/i?${param}&s=2' // 分享链接
			});
			wx.onMenuShareAppMessage({
			    link: host+'${ctx}/p/i?${param}&s=2' // 分享链接
			});
			
			
			
	    });
    </script>
</head>
<body>
<div class="main_box">
        <header class="header">
            <article class="anti-fake_box">
                <p>产品唯一编码: <span>${code }</span>    <em>被扫次数: <span>${scanCount==null?0:scanCount }</span></em></p>
                <c:if test="${scanTime != null && not empty scanTime}">
	                <p>上次被扫时间: <span><fmt:formatDate value="${scanTime}" pattern="yyyy-MM-dd"/></span>  <span><fmt:formatDate value="${scanTime}" pattern="HH:mm:ss"/></span>   
                </c:if>
                <a class="href_btn">举报</a></p>
            </article> 
            <nav class="swiper-container banner_box" style="height:200px;">
                <ul class="swiper-wrapper">
               <c:if test="${imgList != null  && not empty imgList}">
                    <!--  <li class="swiper-slide">
                        <img src="${ctx}/view/portal/img/banner.jpg" width="100%"/>
                    </li> -->
                 	<c:forEach var="img"   items="${imgList }">
                    <li class="swiper-slide">
                        	<img src="${imageUrl }${img.img}" width="100%" height="100%"/>
                    </li>
                  	</c:forEach>
               </c:if>
               <c:if test="${imgList == null  || empty imgList}">
               		<li class="swiper-slide">
                        	<img src="${imageUrl }${product.logo}" width="100%" height="100%"/>
                    </li>
               </c:if> 
                </ul>
                <div class="swiper-pagination"></div>
                <span class="anti_fake_btn">
                    <img src="${ctx}/view/template/portal_1/img/anti-fake-ico-yes.png" width="100%" /><!--假货：anti-fake-ico-yes.png-->
                </span>
            </nav>
        </header>
        <article class="article_master">
            <section class="moster_box">
               <h4></h4>
                <hgroup class="hgroup_img_logo">
                	<c:if test="${product.logo != null  && not empty product.logo}">
                    <img src="${imageUrl }${product.logo}" width="100%" />
                    </c:if>
                </hgroup>
                <article class="article_box">
                    <div class="list_box clear">
                        <span class="list_box_name">产品名称：</span>
                        <span class="list_box_introduce">${product.PName }</span>
                    </div>
                    <div class="list_box clear">
                        <span class="list_box_name">生产厂家：</span>
                        <span class="list_box_introduce"> 
                            <a class="href_btn" href="${ctx }/p/showVendor?id=${vendorId }">${vendorName }</a>
                        </span>
                    </div>
                    <div class="list_box clear">
                        <span class="list_box_name">保质期：</span>
                        <span class="list_box_introduce">${product.keepTime}天</span>
                    </div>
                     <div class="list_box clear">
                        <span class="list_box_name">生产日期：</span>
                        <span class="list_box_introduce"><fmt:formatDate value="${product.produceDate}" pattern="yyyy-MM-dd"/></span>
                    </div>
                    <div class="list_box clear">
                        <span class="list_box_name">产地：</span>
                        <span class="list_box_introduce">${product.producePlace }</span>
                    </div>
                </article>
            </section>

            <section class="moster_box_burdening">
              <c:if test="${dosinglist != null  && not empty dosinglist}">
                <article class="burdening_box">
                    <h4>配料</h4>
                    <hgroup>
                        	<c:forEach var="dosing"   items="${dosinglist }">
                        		<span>${dosing }</span>                   		                        	
                        	</c:forEach>
                    </hgroup>  
                </article>
              </c:if>                        

			  <c:if test="${nvList != null  && not empty nvList}">
                <article class="nutrition_box">
                    <h4>营养成分</h4>
                    <c:forEach var="nv"   items="${nvList }">
                      <div class="nutrition_list">
                        <span class="nutrition_name">${nv.name }</span>
                        <div class="nutrition_inner">
                            <div class="inner_list" style="width:${nv.content };"><!--width:-->
                                <div class="inner_all_animation"></div>
                            </div>
                        </div>
                        <p class="nutrition_number">
                           ${nv.quantity }/${nv.content }
                        </p>                        		                   		                        	
                     </div>
                   </c:forEach>                     
                </article>
              </c:if>
              
            </section>
			
			<c:if test="${product.video != null && not empty product.video }">
            <section class="moster_box_video">
                <article class="video_box">
                    <video class="embed_box" poster="${imageUrl }${product.videoImg}" controls><!--poster：图片-->
                        <c:if test="${product.videoType eq 0 || product.videoType eq null || empty product.videoType}">
	                        <source src="${videoUrl }${product.video}" type="video/mp4">
                        </c:if>
                        <c:if test="${product.videoType eq 1}">
                        	<source src="http://${product.video}" type="video/mp4">
                        </c:if>
                    </video>
                </article>
            </section>
            </c:if>
    </article>
    <footer class="footer_btn">
	     
	       <a class="footer_message" href="${ctx }/view/template/portal_1/comment.jsp">
	        		<img src="${ctx}/view/template/portal_1/img/message_ico.png" width="20px"/>我要留言
	       </a>   		
    </footer>
</div>
</body>
<script src="${ctx}/view/template/portal_1/js/swiper.min.js"></script>
<script type="text/javascript">
        var swiper = new Swiper('.banner_box', {
            pagination: '.swiper-pagination',
            autoplay : 5000,
            paginationClickable: true
        });
    $(function(){
        $('.anti_fake_btn').toggle(
          function () {
            $('.banner_box').animate({'margin-top':'62px'});
            $('.anti-fake_box').animate({'top':'0'});
            $(this).addClass('anti_fake_btn_active');
          },
          function () {
            $('.banner_box').animate({'margin-top':'0'});
            $('.anti-fake_box').animate({'top':'-62px'});
            $(this).removeClass('anti_fake_btn_active');
        });
//        alert($('source').attr('src'));
    });
</script>
</html>
